<template>
  <div class="avatar">
    <el-dropdown trigger="click">
    <span class="el-dropdown-link">
      <div style="display: flex">
        <img :src="avatar">
        <el-icon class="el-icon--right">
          <CaretBottom style="margin-top: 55px"></CaretBottom>
        </el-icon>
      </div>
    </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>修改密码</el-dropdown-item>
          <el-dropdown-item>退出账户</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

  </div>
</template>
<script setup>
import {onMounted, ref} from "vue"
import { userStore } from '@/store/index'
const store = userStore()
let avatar = ref('')
onMounted(() => {
  avatar.value = store.avatar
})
</script>
<style scoped>
.avatar{
  width: 60px;
  height: 40px;
}
.avatar img{
  width: 40px;
  border-radius: 10px;
}
</style>